<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- IMPORT JS -->
    <script>
        // ASYNC-AWAIT：PROMISE的语法糖，可以简化PROMISE的使用代码(更重要的作用是结合AWAIT来处理)

        // ASYNC修饰符，可以让一个普通函数返回的结果都变为PROMISE实例

        // 如果需要返回PROMISE实例，需要这样写返回
        function func() {
            return new Promise(resolve => {
                resolve(10);
            });
        }

        // 使用async修饰符，可以简化PROMISE的使用代码
        async function func () {
            // console.log(aaa);
            // return 10;
            // return {
            //     name: 'aihong',
            // };
            return false;
        }
        func().then(result => {
            // 只有func()返回的是Promise实例，才可以走.then
            // 当函数中没有返回值，返回的依旧是Promise实例，只不过值是undefined
            // 当函数返回false时，但值是false, 依旧promise返回成功状态
            console.log(result); // => { name: 'aihong' }
        }).catch(reason => {
            // 如果函数中有错误，会走catch
            console.log(`报错：${reason}`);
        });

        // AWAIT修饰符：等待PROMISE成功，并获取到它的结果（有点类似于同步的效果，但是不算是同步）
        // 在函数中使用AWAIT，那么当前函数一定要用ASYNC修饰
        function func1() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(1);
                }, 1000);
            });
        }

        function func2() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(2);
                }, 1000);
            });
        }

        function func3() {
            return new Promise((_, reject) => {
                setTimeout(() => {
                    reject(3);
                }, 1000);
            });
        }

        function AAA() {
            return 10;
        }

        function BBB() {
            return false;
        }

        // 需求: 异步串行，FUNC1先执行（等待1s）,成功后执行FUNC2（等待1s）,成功后执行FUNC3(等待1s),成功后输出'OK'
        async function fun() {
            // 没有使用async的代码
            /*func1().then(result => {
                console.log(`第一个函数，${result}`);
                return func2();
            }).then(result => {
                console.log(`第二个函数，${result}`);
                return func3();
            }).then(result => {
                console.log('OK');
            }).catch(reason => {
                console.log('NO');
            });*/

            // 使用async的代码
            let result1 = await func1();
            //只有AWAIT后面的PROMISE实例的状态变为成功
           // 我们把PROMISE的value值赋值给RESULT1,然后才会执行下面的代码
            console.log(result1);

            let result2 = await func2();
            console.log(result2);

            let result3 = await func3();
            // 即使执行下面的也都是可以的，只要结果是成功的
            // let result3 = await 10;
            // let result3 = await AAA();
            // let result3 = await BBB();
            // let result3 = AAA();
            // AWAIT只有在PROMISE实例是成功的时候才会继续执行下面代码
            // 如果PROMISE实例状态为失败，下面代码将不会再执行
            // （报错：Uncaught(in promise)）
            console.log(result3);
        }
        fun();
    </script>
</body>
</html>